<!DOCTYPE html>
<html lang="en">
<head>
    <title>LOGIN</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script>
        $(document).ready(function($){
            $("#form-type").val('login');
            $.ajax({
                url:  '/home',
                type: 'DELETE'
            });

            $(".login-regis h1").click(function(event){
                $('#login-head').fadeOut(500, function() {
                    if($(".login-regis").attr("data-login-regis")=="login"){
                        $(this).text('REGISTER').fadeIn(500);
                        $(".login-regis").attr("data-login-regis", "regis");
                        $("#form-type").val('regis');
                    }
                    else{
                        $(this).text('LOGIN').fadeIn(500);
                        $(".login-regis").attr("data-login-regis", "login");
                        $("#form-type").val('login');
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div class="container bg">
        <div class="col-md-12 col-lg-12" style="margin: 6em 0"></div>
        <div class="col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
            <div class="login-regis" data-login-regis="login">
                <div class="login-regis-head">
                    <h1 id="login-head">LOGIN</h1>
                    <form action="/home" method="post" enctype="application/x-www-form-urlencoded">
                        <div class="col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
                            <input class="input-title" type="text" placeholder="USERNAME" name="username" required/>
                            <input class="input-title" type="password" placeholder="PASSWORD" name="password" required/>
                            <input id="re-password" type="text" placeholder="PASSWORD-AGIAN" name="password-test" style="display: none;"/>
                            <input id="form-type" name="type" type="text" style="display: none" />
                            <input id="post-submit" type="submit" value="ENTER" /> </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>